<template>
<!-- 分享过的人，下单购买了该商品，在昵称后面红字备注（已购买该商品）
点击已购买该商品--链接跳转到对应的商品订单详情 -->
    <div class="app-container">
        <section>
            <div class="contentBox">
                <div class="title">
                    <span>{{$route.query.title}}</span>
                </div>
                <div class="content">
                    <div class="shopInfo common" v-for="(ele,index) in goods" :key="index">
                        <img :src="ele.goods_images[0]" alt="">
                        <div class="info">
                            <div class="left">
                                <p>{{ele.title}}</p>
                                <p>{{ele.sku_text}}</p>
                            </div>
                            <div class="price">
                                ¥<span>{{ele.orders_payable}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="common groupList">
                        <p class="list" v-if="details.shareUser">分享人昵称：{{details.shareUser.username}}</p>
                        <p class="list" v-if="details.shareUser">分享人手机号:{{details.shareUser.phone}}</p>
                        <p class="list">分享时间:{{details.share_time | parseTime}}</p>
                    </div>
                    <div class="common groupList">
                        <p class="list" v-if="details.user">被分享人昵称：{{details.user.username}}
                            <span style="color:#f00" v-if="details.status >1"
                                @click="utils.goUrl(`orderDetails?id=${details.orders_id}`)"
                                >({{details.status >1? '已购买该商品': ''}})</span>
                        </p>
                        <p class="list" v-if="details.user">被分享人手机号：{{details.user.phone}}</p>
                        <p class="list" v-if="details.orders">下单时间:{{details.orders.pay_time}}</p>
                        <p class="list red" v-if="details.orders">订单编号:{{details.orders.out_trade_no}}</p>
                    </div>
                    <div style="margin-top:40px">
                        <el-button  @click="$router.go(-1)">返回</el-button>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
export default {
    data() {
        return {
            id:'',
            details:{},
            goods:[]
        }
    },
    created() {
        if (this.$route.query.id) {
            this.id = this.$route.query.id
            this.getDetails()
        }
        this.$route.meta.title = this.$route.query.title
    },
    methods: {
        async getDetails() {
            let {code,data} = await this.$Http.catShareGoods({id:this.id})
            if (code) {
                data.orders.goods.forEach((ele)=>{
                    ele.goods_images = ele.goods_images.split(",")
                })
                this.details = data
                this.goods  = this.details.orders.goods
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    section {
        .contentBox {
            background: #fff;
            border-radius: 8px;
            padding: 0px 24px 20px;
            min-height: calc(100vh - 165px );
            .title {
                line-height: 70px;
                font-size: 18px;
                font-weight: 600;
                color: #383b40;
                .el-icon-close {
                    cursor: pointer;
                }
            }
        }
    }
    .shopInfo{
        display: flex;
        .info{
            display: flex;
            align-items: center;
            color: #383b40;
            font-size: 16px;
        }
        .price{
            margin-left: 200px;
            font-size: 14px;
            span{
                font-size: 20px;
            }
        }
    }
    .common{
        background: #f1f1f1;
        padding: 20px;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 20px;
        border-radius: 6px;
        img{
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 4px;
            margin-right: 30px;
        }
    }
    .groupList{
        color: #383b40;
        p{
            margin: 0;
            margin-bottom: 10px;
        }
        p:last-child{
            margin: 0;
        }
        .red{
            color: #f00;
        }
    }
    .box{
        width: 560px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #383b40;
        p{
            margin: 0;
        }
        span{
            color: #f00;
        }
    }
}
::v-deep{
    .el-input{
        width: 250px;
    }
    .el-icon-circle-plus-outline,.el-icon-remove-outline{
        color: #999;
        font-size: 26px;
        margin: 0 5px;
    }
     .el-icon-circle-plus-outline{
        margin-left: 20px;
    }
    .el-icon-remove-outline{
        color: #f00;
    }
    .el-form-item__content{
        display: flex;
        align-items: center;
    }
}
</style>